<template>
  <div class="page-wrap">
    <div class="page-title">数据盘</div>
    <div class="page-sub-title">基本用法</div>
    <codeShow :code="code1">
      <el-form :model="form" :rules="rules" label-width="120px">
        <CdsDataDisk
          v-model="CdsDataDisk_from"
          :systemDiskTypes="type"
          :dataDiskTypes="type"
          :totalDataDisk="10"
          :totalSize="98"
        />
      </el-form>
    </codeShow>
  </div>
</template>

<script setup>
import codeShow from '../../components/code.vue';
import CdsDataDisk from '../../../../packages/businessComponents/cdsDataDisk/src/cdsDataDisk.vue';
import { reactive, ref } from 'vue';
const code1 = ``;
const form = reactive({
});
const rules = reactive({
  systemDisk: [
    { required: true, message: '请选择系统盘', trigger: 'blur' },
  ],
  dataDisk: [
    { required: true, message: '请选择系统盘', trigger: 'blur' },
  ],
})
const type = ref([
  {
    label: '性能型', value: "性能型"
  }
]);
const CdsDataDisk_from = reactive({
  systemDisk: {
    type: '',
    size: 20
  },
  dataDisk: [
    {
      type: '',
      size: 20,
      num: 1
    },
  ]
});
</script>

<style lang="scss" scoped>
</style>